<!-- ID、CreateXxx、UpdateXxx的显示 -->
<template>
  <span v-if="showCreateUpdateInfo">
    <q-chip size="sm" class="gt-sm" square :ripper="false" v-show="modelWithCreateUpdate[modelId]" :ripple="false">
      <q-avatar color="grey-5" text-color="white">ID</q-avatar>
      <span class="chip-font">{{modelWithCreateUpdate[modelId]}}</span>
    </q-chip>
    <q-chip size="sm" class="gt-sm" square :title="$t('创建人/创建时间')" :ripper="false" v-show="modelWithCreateUpdate.createP"
      :ripple="false">
      <q-avatar color="grey-5" text-color="white">C</q-avatar>
      <span class="chip-font">
        {{fx.fmt.userDisp(modelWithCreateUpdate.createP, modelWithCreateUpdate.createPn)}}
        {{fx.fmt.dtFmtFull(modelWithCreateUpdate.createDt)}}
      </span>
    </q-chip>
    <q-chip size="sm" class="gt-sm" square :title="$t('更新人/更新时间')" :ripper="false" v-show="modelWithCreateUpdate.updateP"
      :ripple="false">
      <q-avatar color="grey-5" text-color="white">U</q-avatar>
      <span class="chip-font">
        {{fx.fmt.userDisp(modelWithCreateUpdate.updateP, modelWithCreateUpdate.updatePn)}}
        {{fx.fmt.dtFmtFull(modelWithCreateUpdate.updateDt)}}
      </span>
    </q-chip>
    <q-icon class="cursor-pointer lt-md" name="far fa-clock" size="xs" :title="$t('创建/更新信息')">
      <q-tooltip transition-show="none" transition-hide="none" anchor="center left" self="center right" color="info">
        <div class="text-caption">ID: {{modelWithCreateUpdate[modelId]}}</div>
        <div class="text-caption">
          {{fx.fmt.userDisp(modelWithCreateUpdate.createP, modelWithCreateUpdate.createPn)}} {{$t('创建于')}}
          {{fx.fmt.dtFmtFull(modelWithCreateUpdate.createDt)}}
        </div>
        <div class="text-caption">
          {{fx.fmt.userDisp(modelWithCreateUpdate.updateP, modelWithCreateUpdate.updatePn)}} {{$t('更新于')}}
          {{fx.fmt.dtFmtFull(modelWithCreateUpdate.updateDt)}}
        </div>
      </q-tooltip>
    </q-icon>
  </span>
</template>

<script lang="ts">
export default {
  name: 'idCreateUpdateDisp',
}
</script>

<script lang="ts" setup>
const props = defineProps({
  // 带有CreateP、CreatePn、CeateDt、UpdateP、UpdatePn、UpdateDt信息的model
  modelWithCreateUpdate: {
    type: Object,
    default: null,
  },
  // 指定model中哪个字段是ID，有的话显示出来
  modelId: {
    type: String,
    default: null,
  },
})

const showCreateUpdateInfo = function () {
  return (props.modelWithCreateUpdate && props.modelId && props.modelWithCreateUpdate[props.modelId] && props.modelWithCreateUpdate.createDt)
}
const fx = $f
</script>
<style lang="sass" scoped>
.chip-font
  font-size: 12px
</style>
